<template>
	<div class="usercouponstyle">
		<h2 class="mt10 mb10">{{ datas.text }}</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<el-form style="margin-top: 10px" label-width="100px">
						<vuedraggable :list="datas.list" item-key="index" :forceFallback="true" :animation="200">
							<template #item="{ element, index }">
								<section class="imgBanner">
									<van-icon class="el-icon-circle-close" name="close" @click="deleteimg(index)" />
									<el-form-item class="lef" label="选择图标">
										<!-- <div class="image cursor-pointer" @click="choiceIcon(index)">
											<el-image v-if="element.icon != ''" :src="STATIC_URL + element.icon" fit="contain" />
											<SvgIcon v-else name="ele-Plus"></SvgIcon>
										</div> -->

										<div class="sd-flex">
											<div class="choice-image choice-image-delete" @click="choiceIcon(index)">
												<el-image v-if="element.icon != ''" :src="STATIC_URL + element.icon" fit="cover" class="cover-image" />
												<el-icon v-else>
													<ele-Plus />
												</el-icon>

												<div class="delete-content" @click.stop="element.icon = ''" v-if="element.icon != ''">
													<SvgIcon name="ele-DeleteFilled"></SvgIcon>
												</div>
											</div>
											<div class="ml10 tip">44*44</div>
										</div>
									</el-form-item>

									<el-form-item label="展示标题">
										<el-input placeholder="请输入展示标题" v-model="element.title"></el-input>
									</el-form-item>

									<el-form-item label="记录值">
										<el-input placeholder="请输入记录值" v-model="element.value"></el-input>
									</el-form-item>

									<el-form-item label="订单类型">
										<el-input placeholder="请输入订单类型" v-model="element.type"></el-input>
									</el-form-item>

									<!-- 输入链接 -->
									<el-form-item label="访问路径">
										<el-input v-model="element.path">
											<template #append> <el-button @click="openChoiceData(index)">选择</el-button> </template>
										</el-input>
									</el-form-item>
								</section>
							</template>
						</vuedraggable>
						<!-- 添加导航按钮 -->
						<el-button @click="addOrderTabBar"> 添加 </el-button>
					</el-form>
				</div>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
		<PageData ref="PageDataRef" @choice="choicePage"></PageData>
	</div>
</template>

<script setup lang="ts" name="usercouponstyle">
import { defineAsyncComponent, ref } from 'vue';

import vuedraggable from 'vuedraggable'; //拖拽组件
import { STATIC_URL } from '/@/utils/config';

const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));

const PageData = defineAsyncComponent(() => import('/@/views/shop/data/page/choice/index.vue'));

const PageDataRef = ref();

const props = defineProps({
	datas: {},
});
const FileChoiceRef = ref();
const choiceIndex = ref(0);
const choiceIcon = (index) => {
	choiceIndex.value = index;
	FileChoiceRef.value.openFileChoiceDialog();
};
const deleteimg = (index) => {
	props.datas.list.splice(index, 1);
};

const choiceFile = (res) => {
	props.datas.list[choiceIndex.value].icon = res[0].visitRelativePath;
};

const addOrderTabBar = () => {
	props.datas.list.push({
		title: '',
		value: '',
		icon: '',
		path: '',
		type: '',
	});
};

let choicePageIndex = 0;
const openChoiceData = (index) => {
	PageDataRef.value.openDialog();
	choicePageIndex = index;
};

const choicePage = (res) => {
	console.log('choice page res: ', res);
	props.datas.list[choicePageIndex].path = res.urlContent;
};
</script>

<style scoped lang="scss">
.usercouponstyle {
	width: 100%;
}

/* 卡片列表 */
.imgBanner {
	padding: 6px 12px;
	margin: 16px 7px;
	border-radius: 2px;
	background-color: #fff;
	box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
	display: flex;
	flex-direction: column;
	position: relative;

	&:hover {
		.el-icon-circle-close {
			display: block;
		}
	}

	/* 删除图标 */

	.el-icon-circle-close {
		position: absolute;
		right: -5px;
		top: -10px;
		cursor: pointer;
		font-size: 19px;
		display: none;
	}

	.image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50px;
		height: 50px;
		border: 1px dashed var(--el-border-color-darker);
	}

	/* 图片 */

	.imagBox {
		cursor: pointer;
		height: 100px;
		width: 100px;
		display: flex;
		justify-content: center;
		align-items: center;

		.imag {
			width: 60px;
			height: 60px;
		}

		div {
			position: absolute;
			top: 0;
			width: 60px;
			line-height: 60px;
			border-radius: 5px;
			text-align: center;
			font-size: 12px;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.3);
		}
	}

	/* 图片字 */

	.imgText {
		padding-left: 20px;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: space-around;
		/* 图片字 */

		.imgTextChild {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			justify-content: space-between;

			.fir-sele.el-select {
				width: 40%;
			}
		}

		.imgText-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.imgText-top-r {
				width: 50%;
				text-align: center;
				font-size: 12px;

				span {
					margin-right: 10px;
				}
			}

			:deep(.el-input),
			.el-input--mini {
				flex: 1;
			}
		}
	}
}

.icon-tip {
	font-size: 12px;
	color: red;
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}
</style>
